<template>
  <div class="home-page">
    <div class="backlog">
      <div class="backlog-tabs">
        <span :class="activeName=='all'?'active':''" @click="handleTab('all')">全部 <span class="bradge">65</span></span>
        <span
          :class="activeName=='daiban'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('daiban')"
        >待办</span>
        <span
          :class="activeName=='duban'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('duban')"
        >督办清单</span>
        <span
          :class="activeName=='linshi'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('linshi')"
        >临时报表</span>
      </div>
      <div class="backlog-content">
        <div v-if="activeName=='all'" class="content">
          <div class="content-item">
            <div class="content-item-icon">
              <img style="width: 36px; height: 36px" src="../../assets/image/tongxl.png">
            </div>
            <div class="content-information">
              <div class="title">五强溪水电站</div>
              <div class="Approval_div">
                <span>进行中</span>
              </div>
            </div>
            <div class="content-information2">
              <div class="Originator_div">发起人：皮定坤[生产管理部]</div>
              <div class="Dealing_div">接收时间：2021-02-09 15:37</div>
              <div class="Serial_number">审批编号：2021000280</div>
            </div>
            <div class="content-information3">
              <div class="Originator_div">当前处理人: <span class="Originator_div_icon"><span>系统管理员;</span></span></div>
              <div class="info">[项目对接人]谢涛 完成督办“疫情防控3月报表”任务，流程编号为：【2021000280】</div>
            </div>
          </div>
          <div class="content-item">
            <div class="content-item-icon">
              <img style="width: 36px; height: 36px" src="../../assets/image/tongxl.png">
            </div>
            <div class="content-information">
              <div class="title">五强溪水电站</div>
              <div class="Approval_div">
                <span>进行中</span>
              </div>
            </div>
            <div class="content-information2">
              <div class="Originator_div">发起人：皮定坤[生产管理部]</div>
              <div class="Dealing_div">接收时间：2021-02-09 15:37</div>
              <div class="Serial_number">审批编号：2021000280</div>
            </div>
            <div class="content-information3">
              <div class="Originator_div">当前处理人: <span class="Originator_div_icon"><span>系统管理员;</span></span></div>
              <div class="info">[项目对接人]谢涛 完成督办“疫情防控3月报表”任务，流程编号为：【2021000280】</div>
            </div>
          </div>
          <div class="content-item" style="border-bottom:none;">
            <div class="content-item-icon">
              <img style="width: 36px; height: 36px" src="../../assets/image/tongxl.png">
            </div>
            <div class="content-information">
              <div class="title">五强溪水电站</div>
              <div class="Approval_div">
                <span>进行中</span>
              </div>
            </div>
            <div class="content-information2">
              <div class="Originator_div">发起人：皮定坤[生产管理部]</div>
              <div class="Dealing_div">接收时间：2021-02-09 15:37</div>
              <div class="Serial_number">审批编号：2021000280</div>
            </div>
            <div class="content-information3">
              <div class="Originator_div">当前处理人: <span class="Originator_div_icon"><span>系统管理员;</span></span></div>
              <div class="info">[项目对接人]谢涛 完成督办“疫情防控3月报表”任务，流程编号为：【2021000280】</div>
            </div>
          </div>
        </div>
        <div v-if="activeName=='daiban'">待办内容</div>
        <div v-if="activeName=='duban'">督办清单</div>
        <div v-if="activeName=='linshi'">临时报表</div>
      </div>
    </div>
    <div class="overview">
      <div class="overview-tabs">
        <span :class="activeName2=='xiangmu'?'active':''" @click="handleTab('xiangmu')">项目策划概览</span>
        <span
          :class="activeName2=='shigong'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('shigong')"
        >施工日志概览</span>
      </div>
      <div class="overview-content">
        <div v-if="activeName2=='xiangmu'">
          <div class="content-item1">
            <div><span class="overview-icon">管理与实施策划</span>
              <div class="content-info">
                <div class="content-info-item">
                  <div class="item_div">
                    <span style="font-size:13px;">待上传</span>
                    <span style="font-size:22px;margin-left:22px">20</span>
                    <div style="color:#909399;height:14px;line-height:14px;font-size:10px;">管理策划文件</div>
                  </div>
                  <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                    <span style="font-size:13px;">待上传</span><span style="font-size:22px;margin-left:22px">31</span>
                    <div style="color:#909399;height:14px;line-height:14px;font-size:10px;">实施策划文件</div>
                  </div>
                  <div class="item_div">
                    <span style="font-size:13px;">全部完成</span><span style="font-size:22px;margin-left:22px">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-item2">
            <div><span class="overview-icon">组织机构设置</span>
              <div class="content-info">
                <div class="content-info-item">
                  <div class="item_div"><span style="font-size:13px;">待设置</span><span
                    style="font-size:22px;margin-left:22px"
                  >13</span>
                  </div>
                  <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                    <span style="font-size:13px;">待配置</span><span style="font-size:22px;margin-left:22px">17</span>
                  </div>
                  <div class="item_div">
                    <span style="font-size:13px;">全部完成</span><span style="font-size:22px;margin-left:22px">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-item3">
            <div><span class="overview-icon">班子成员设置</span>
              <div class="content-info">
                <div class="content-info-item">
                  <div class="item_div"><span style="font-size:13px;">待设置</span><span
                    style="font-size:22px;margin-left:22px"
                  >8</span>
                  </div>
                  <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                    <span style="font-size:13px;">待配置</span><span style="font-size:22px;margin-left:22px">19</span>
                  </div>
                  <div class="item_div">
                    <span style="font-size:13px;">全部完成</span><span style="font-size:22px;margin-left:22px">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-item4">
            <div><span class="overview-icon">分包商进场</span>
              <div class="content-info">
                <div class="content-info-item">
                  <div class="item_div"><span style="font-size:13px;">未进场</span><span
                    style="font-size:22px;margin-left:22px"
                  >12</span>
                  </div>
                  <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                    <span style="font-size:13px;">进行中</span><span style="font-size:22px;margin-left:22px">6</span>
                  </div>
                  <div class="item_div">
                    <span style="font-size:13px;">已进场</span><span style="font-size:22px;margin-left:22px">15</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName2=='shigong'" class="build-content">
          <el-table :data="tableData" height="380" style="width: 100%;over-flow:auto;">
            <el-table-column prop="name" label="项目部" width="220" />
            <el-table-column prop="info" label="填报情况" />
            <el-table-column prop="date" label="日期" width="140" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="project-info">
      <div class="project-tabs">
        <span :class="activeName3=='type'?'active':''" @click="handleTab('type')">项目类型</span>
        <span
          :class="activeName3=='state'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('state')"
        >项目状态</span>
      </div>
      <div class="project-content">
        <div v-if="activeName3=='type'" class="project-type">
          <div class="unit">单位：个</div>
          <div id="echarts-type" />
        </div>
        <div v-if="activeName3=='state'" class="project-state">
          <div class="unit">单位：个</div>
          <div id="echarts-state" />
        </div>
      </div>
    </div>
    <div class="unfinished-work">
      <div class="unfinished-tabs">
        <span :class="activeName4=='unfinish'?'active':''" @click="handleTab('unfinish')">未完成年度施工节点</span>
        <span
          :class="activeName4=='points'?'active':''"
          style="margin-left: 22px;"
          @click="handleTab('points')"
        >扣分信息</span>
      </div>
      <div class="unfinished-content">
        <div v-if="activeName4=='unfinish'" class="unfinish-content">
          <el-table :data="tableData3" height="340" style="width: 100%;over-flow:auto;">
            <el-table-column prop="task" label="任务名称" width="320" />
            <el-table-column prop="name" label="所属项目" />
            <el-table-column prop="date" label="完成期限" width="140" />
          </el-table>
        </div>
        <div v-if="activeName4=='points'" class="points-content">
          <el-table :data="tableData2" height="340" style="width: 100%;over-flow:auto;">
            <el-table-column prop="info" label="扣分事项" width="320" />
            <el-table-column prop="name" label="所属项目" />
            <el-table-column prop="point" label="扣分分值" width="140" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="scattergram">
      <div class="scattergram-tabs">
        <span class="active">工程地区分散图</span>
      </div>
      <div id="scattergram-content" />
    </div>
    <div class="contract">
      <div class="contract-tabs">
        <span class="active">工程合同大小分布</span>
      </div>
      <div class="contract-content">
        <div class="unit">单位：个</div>
        <div id="echarts-contract" />
      </div>
    </div>
  </div>

</template>

<script>
import echarts from 'echarts'
import '@/utils/china.js'
export default {
  data() {
    return {
      activeName: 'all',
      activeName2: 'xiangmu',
      activeName3: 'type',
      activeName4: 'unfinish',
      tableData: [{
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }, {
        name: '项目一部实施一部',
        info: '未填报',
        date: '2016-05-03'
      }],
      tableData2: [{
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }, {
        info: '项目日志预期填写',
        name: '项目一部',
        point: '10'
      }],
      tableData3: [{
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }, {
        task: '康泰风力发电场50MW、利泰利泰利泰…',
        name: '项目一部',
        date: '2021-03-04'
      }]
    }
  },
  mounted() {
    if (this.activeName3 === 'type') {
      this.drawEcharts1()
    }
    if (this.activeName3 === 'state') {
      this.drawEcharts2()
    }
    this.drawEcharts4()
    this.drawEcharts3()
  },
  methods: {
    getBacklogData() {

    },
    handleTab(val) {
      if (val === 'all') this.activeName = 'all'
      if (val === 'daiban') this.activeName = 'daiban'
      if (val === 'duban') this.activeName = 'duban'
      if (val === 'linshi') this.activeName = 'linshi'
      if (val === 'xiangmu') this.activeName2 = 'xiangmu'
      if (val === 'shigong') this.activeName2 = 'shigong'
      if (val === 'type') {
        this.activeName3 = 'type'
        this.$nextTick(this.drawEcharts1)
      }
      if (val === 'state') {
        this.activeName3 = 'state'
        this.$nextTick(this.drawEcharts2)
      }
      if (val === 'unfinish') this.activeName4 = 'unfinish'
      if (val === 'points') this.activeName4 = 'points'
    },
    // 项目类型
    drawEcharts1() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('echarts-type'))
      // 绘制图表
      myChart.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#49ACF6', '#62D9AD', '#5A6B98', '#9DE0FC'],
        legend: {
          orient: 'horizontal',
          x: 'left', // 图例距离左的距离
          y: '300px', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: ['公路', '水利水电', '市政', '水务环境', '机场', '其他']
        },
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/>数量：{c}个<br/>金额：{e}亿"
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:${params.data.color};border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.a}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['0', '70%'],
          // 圆环位置
          center: ['50%', '35%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: [{
            name: '公路',
            value: 50,
            a: 35.5,
            color: '#FDDC4C'
          }, {
            name: '水利水电',
            value: 17,
            a: 35.5,
            color: '#FF8F38'
          }, {
            name: '市政',
            a: 35.5,
            value: 15,
            color: '#49ACF6'
          }, {
            name: '水务环境',
            a: 35.5,
            value: 12,
            color: '#62D9AD'
          }, {
            name: '机场',
            a: 35.5,
            value: 19,
            color: '#5A6B98'
          }, {
            name: '其他',
            a: 35.5,
            value: 4,
            color: '#9DE0FC'
          }]
        }]
      })
    },
    // 项目状态
    drawEcharts2() {
      const myChart2 = echarts.init(document.getElementById('echarts-state'))
      // 绘制图表
      myChart2.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#62D9AD', '#5A6B98', '#9DE0FC'],
        legend: {
          orient: 'horizontal',
          x: 'left', // 图例距离左的距离
          y: '300px', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: ['未开工', '实施', '尾工', '停工', '完工']
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:${params.data.color};border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.a}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['50', '70%'],
          // 圆环位置
          center: ['50%', '35%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          label: {
            normal: { // normal 是图形在默认状态下的样式
              show: true,
              position: 'center',
              color: '#333',
              fontSize: 14,
              fontWeight: 400,
              formatter: '本年度\n\n共78个' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: [{
            name: '未开工',
            value: 50,
            a: 35.5,
            color: '#FDDC4C'
          }, {
            name: '实施',
            value: 17,
            a: 35.5,
            color: '#FF8F38'
          }, {
            name: '尾工',
            a: 35.5,
            value: 15,
            color: '#49ACF6'
          }, {
            name: '停工',
            a: 35.5,
            value: 19,
            color: '#5A6B98'
          }, {
            name: '完工',
            a: 35.5,
            value: 4,
            color: '#9DE0FC'
          }]
        }]
      })
    },
    // 工程地区分散图
    drawEcharts3() {
      const myChart3 = echarts.init(document.getElementById('scattergram-content'))
      // 绘制图表
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:${params.data.color};border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.num}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        visualMap: {
          name: '数值范围',
          min: 8,
          max: 30,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#fcf2a9', 'yellow', '#f18e74']
          }
        },
        series: [{
          type: 'map',
          mapType: 'china', // 自定义扩展图表类型
          label: {
            show: true
          },
          data: [{
            name: '北京',
            value: [116.405285, 39.904989, 24],
            color: '#fcf2a9',
            num: 3,
            money: 10
          }, {
            name: '湖南',
            value: [116.405285, 39.904989, 24],
            color: '#FFBC77',
            num: 11,
            money: 65
          }, {
            name: '湖北',
            value: [116.405285, 39.904989, 24],
            color: '#FFBC77',
            num: 15,
            money: 78
          }
          ]
        }]
      })
    },
    // 工程合同大小分布
    drawEcharts4() {
      // 基于准备好的dom，初始化echarts实例
      const myChart4 = echarts.init(document.getElementById('echarts-contract'))
      // 绘制图表
      myChart4.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}亿元：{c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '3%',
          containLabel: true
        },
        xAxis: [{
          name: '单位：(亿元)',
          type: 'category',
          data: ['低于1', '1~5', '5~10', '10~20', '高于20'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'bar',
          barWidth: '50%',
          data: [32, 49, 55, 44, 35]
        }]
      })
    }
  }

}

</script>
<style lang="scss" scoped>
  .home-page {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    background: #F7F7F7;

    .backlog {
      //待办
      width: 41.25%;
      height: 424px;
      overflow: hidden;
      overflow-y: auto;
      background: #FFFFFF;

      .backlog-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

          .bradge {
            background-color: #F56C6C;
            border-radius: 9px;
            color: #fff;
            display: inline-block;
            font-size: 13px;
            width: 28px;
            height: 18px;
            line-height: 18px;
            padding: 0 6px;
            text-align: center;
            white-space: nowrap;
            border: 1px solid #fff;
          }
        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      .backlog-content {
        margin: 0px 12px 12px 12px;

        .content {
          .content-item {
            margin-top: 15px;
            height: 107px;
            border-bottom: 1px solid #EEEEEE;

            .content-item-icon {
              left: 0px;
              top: 0;
              margin-right: 12px;
              text-align: center;
              border-radius: 50%;
              background: #fff;
              width: 36px;
              height: 36px;
              line-height: 36px;
              overflow: hidden;
              float: left;
            }

            .content-information {
              width: 100%;
              height: 21px;

              .title {
                color: #16263c;
                font-size: 15px;
                float: left;
                font-weight: bold;
              }

              .Approval_div {
                float: right;
                width: 49px;
                height: 21px;
                -webkit-border-radius: 3px;
                border-radius: 9px;
                color: #fff;
                font-weight: lighter;

                span {
                  font-size: 12px;
                  height: 17px;
                  line-height: 17px;
                  padding: 2px 4px;
                  border-radius: 6px;
                  background-color: #FFBB1A;
                }
              }

            }

            .content-information2 {
              width: 100%;
              height: 19px;

              .Originator_div {
                float: left;
                margin: 1px 0 0 0;
                color: #323232;
                font-size: 12px;
              }

              .Dealing_div {
                overflow: hidden;
                color: #757575;
                float: left;
                font-size: 13px;
                margin: 0 0 0 10px;
                padding: 0 0 0 0;
              }

              .Serial_number {
                float: right;
                margin: 0 6px 0 0;
                color: #323232;
                font-size: 12px;
              }
            }

            .content-information3 {
              width: 100%;
              margin-top: 14px;
              margin-left: 48px;

              .Originator_div {
                margin: 1px 0 0 0;
                color: #323232;
                height: 17px;
                line-height: 17px;
                font-size: 12px;

                .Originator_div_icon {
                  background: url('../../assets/image/success.png') no-repeat 0 center;
                  background-size: contain;
                  padding-left: 16px;
                }
              }

              .info {
                height: 17px;
                line-height: 17px;
                margin-top: 4px;
                color: #323232;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .overview {
      width: 32.15%;
      height: 424px;
      margin-left: 10px;
      background: #FFFFFF;

      .overview-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      .overview-content {
        padding: 6px 13px 26px 12px;

        .content-item1 {
          width: 100%;
          height: 76px;
          margin-top: 15px;

          .overview-icon {
            background: url('../../assets/image/策划@2x.png') no-repeat 0 center;
            background-size: 12px 12px;
            height: 14px;
            line-height: 14px;
            padding-left: 17px;
            color: #909399;
            font-size: 13px;
          }

          .content-info {
            height: 60px;
            margin-top: 4px;
            background: #F5F7FA;
            border-radius: 2px;

            .content-info-item {
              display: flex;

              .item_div {
                flex: 1;
                height: 22px;
                line-height: 22px;
                margin-top: 18px;
                padding-left: 29px;
              }
            }
          }
        }

        .content-item2 {
          width: 100%;
          height: 76px;
          margin-top: 15px;

          .overview-icon {
            background: url('../../assets/image/组织机构@2x.png') no-repeat 0 center;
            background-size: 12px 12px;
            height: 14px;
            line-height: 14px;
            padding-left: 17px;
            color: #909399;
            font-size: 13px;
          }

          .content-info {
            height: 60px;
            margin-top: 4px;
            background: #F5F7FA;
            border-radius: 2px;

            .content-info-item {
              display: flex;

              .item_div {
                flex: 1;
                height: 22px;
                line-height: 22px;
                margin-top: 18px;
                padding-left: 29px;
              }
            }
          }
        }

        .content-item3 {
          width: 100%;
          height: 76px;
          margin-top: 15px;

          .overview-icon {
            background: url('../../assets/image/成员@2x.png') no-repeat 0 center;
            background-size: 12px 12px;
            height: 14px;
            line-height: 14px;
            padding-left: 17px;
            color: #909399;
            font-size: 13px;
          }

          .content-info {
            height: 60px;
            margin-top: 4px;
            background: #F5F7FA;
            border-radius: 2px;

            .content-info-item {
              display: flex;

              .item_div {
                flex: 1;
                height: 22px;
                line-height: 22px;
                margin-top: 18px;
                padding-left: 29px;
              }
            }
          }
        }

        .content-item4 {
          width: 100%;
          height: 76px;
          margin-top: 15px;

          .overview-icon {
            background: url('../../assets/image/分包商@2x.png') no-repeat 0 center;
            background-size: 12px 12px;
            height: 14px;
            line-height: 14px;
            padding-left: 17px;
            color: #909399;
            font-size: 13px;
          }

          .content-info {
            height: 60px;
            margin-top: 4px;
            background: #F5F7FA;
            border-radius: 2px;

            .content-info-item {
              display: flex;

              .item_div {
                flex: 1;
                height: 22px;
                line-height: 22px;
                margin-top: 18px;
                padding-left: 29px;
              }
            }
          }
        }

        .build-content {
          .el-table--scrollable-y ::-webkit-scrollbar {
            display: none;
          }
        }

      }
    }

    .project-info {
      flex: 1;
      height: 424px;
      margin-left: 10px;
      background: #FFFFFF;

      .project-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      .project-content {

        .project-type {
          .unit {
            width: 56px;
            height: 20px;
            font-size: 14px;
            margin-left: 13px;
            margin-top: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3E3E3E;
            line-height: 20px;
          }

          #echarts-type {
            margin: 5px auto;
            width: 340px;
            height: 340px;
          }
        }

        .project-state {
          .unit {
            width: 56px;
            height: 20px;
            font-size: 14px;
            margin-left: 13px;
            margin-top: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3E3E3E;
            line-height: 20px;
          }

          #echarts-state {
            margin: 5px auto;
            width: 340px;
            height: 340px;
          }
        }

      }
    }

    .unfinished-work {
      width: 41.25%;
      height: 386px;
      margin-top: 10px;
      background: #FFFFFF;

      .unfinished-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      .unfinished-content {
        padding: 6px 13px 26px 12px;

        .unfinish-content {
          .el-table--scrollable-y ::-webkit-scrollbar {
            display: none;
          }
        }

        .points-content {
          .el-table--scrollable-y ::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }

    .scattergram {
      width: 32.15%;
      height: 386px;
      margin-top: 10px;
      margin-left: 10px;
      background: #FFFFFF;

      .scattergram-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      #scattergram-content {
        width: 100%;
        height: 350px;
      }

    }

    .contract {
      flex: 1;
      height: 386px;
      margin-top: 10px;
      margin-left: 10px;
      background: #FFFFFF;

      .contract-tabs {
        border-bottom: 1px solid #1468B7;
        padding-top: 7px;
        padding: 10px;

        span {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          cursor: pointer;

        }

        .active {
          color: #333;
          font-weight: 600;
        }
      }

      .contract-content {
        .unit {
          width: 56px;
          height: 20px;
          font-size: 14px;
          margin-left: 13px;
          margin-top: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3E3E3E;
          line-height: 20px;
        }

        #echarts-contract {
          margin: 5px auto;
          width: 360px;
          height: 320px;
          overflow: hidden;
        }
      }
    }
  }

</style>
